<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="./echart3jiliandong/static/css/main.css">
		<link rel="stylesheet" type="text/css" href="amaze/css/amazeui.min.css" />
		<link rel="stylesheet" type="text/css" href="style/myWeb.css" />
		<title>一级(pro_home)</title>
		<style type="text/css">
			ul,
			li {
				list-style: none;
				display: block;
			}
			
			#scrollBox {
				height: 75%;
				width: 100%;
				margin: 0px auto;
				background: transparent;
				overflow: hidden;
				position: absolute;
				top: 37px;
			}
			
			#scrollBox #con1,
			#con2 {
				width: 100%;
				float: left;
			}
			
			#scrollBox li {
				height: 15px;
				line-height: 15px;
				text-align: center;
			}
			
			.am-fl {
				float: left;
			}
			
			.am-avg-lg-3 {
				width: 30.333%;
				text-align: center;
				color: #fff;
			}
			/* 
			*new add 1014
			 */
			
			.customInfo[data-v-a9740b4e] {
				height: 83px;
				padding: 0 18px;
				border-style: solid;
				border-color: rgba(25, 46, 62, 0.2);
				;
				border-width: 1px 1px 0;
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
				border-color: transparent;
			}
			
			.customInfoCard[data-v-4820b226] {
				width: 100%;
				z-index: 1;
				font-family: \\5FAE\8F6F\96C5\9ED1;
			}
			
			.customInfo table[data-v-a9740b4e] {
				width: 100%;
				height: 70px;
				overflow: hidden;
				color: #fff;
				margin-top: 10px;
				text-align: center;
			}
			
			thead {
				display: table-header-group;
				vertical-align: middle;
				border-color: inherit;
			}
			
			tr {
				display: table-row;
				vertical-align: inherit;
				border-color: transparent;
			}
			
			td {
				border-color: inherit !Important;
			}
			
			tbody {
				display: table-row-group;
				vertical-align: middle;
				border-color: inherit !important;
			}
			
			.customInfo table td[data-v-a9740b4e] {
				font-size: 13px;
			}
			
			.customInfo table td span[data-v-a9740b4e] {
				font-size: 30px;
			}
			
			.safetyDays[data-v-a9740b4e] {
				color: #1eff2e;
			}
			
			.h-title {
				box-shadow: 0 0 0px #2C58A6;
			}
			
			.h-title>h3 {
				color: #fff
			}
			
			.audio-div {
				position: absolute;
				top: 20px;
				width: 360px;
				height: 170px;
			}
			
			.gj-danwei {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 0px;
				height: 0px;
				background: red;
			}
			
			#secondPageMsg_ul li {
				color: #fff
			}
		</style>
		<script type="text/javascript" src="./echart3jiliandong/static/js/echarts.min.js"></script>
		<!-- 全国344个市、区、州对应的数字编号 -->
		<script type="text/javascript" src="./echart3jiliandong/static/js/citymap.js"></script>

		<script src="./js/jquery.min.js"></script>
	</head>

	<body>
		<div class="header-out public-header">
			<div class="header-box">
				<div class="">
					<h1 class="am-text-center">XX 智 能 电 力 大 数 据 平 台</h1>
				</div>
				<div class="nav">
					<div class="am-g nav-am-g">
						<div class="am-u-lg-3" style="color: transparent;">
							<!-- <ul>
									<li class="">
										<a href="">返回上一页</a>
									</li>
								</ul> -->
							S
						</div>
						<div class="am-u-lg-6">
							<ul class="am-nav am-nav-pills am-nav-justify" style="display: none;">
								<li class="">
									<a href="#">智能电力运维</a>
									<ul>
										<li>
											<a href="http://58.42.229.85:8088" target="_blank">A类</a>
										</li>
										<li>
											<a href="./intlgMonitor.html">B类</a>
										</li>
										<li>
											<a href="http://58.42.229.85:38085" target="_blank">C类</a>
										</li>
										<li>
											<a href="#">D类</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="#">智能综合能源管理</a>
									<ul>
										<li>
											<a href="http://58.42.229.85:1080/iEEMWeb/" target="_blank">A类</a>
										</li>
										<li>
											<a href="#">B类</a>
										</li>
										<li>
											<a href="#">C类</a>
										</li>

									</ul>
								</li>
								<li>
									<a href="#">故障诊断分析</a>
								</li>
								<li>
									<a href="#">工程项目管理</a>
								</li>
								<li>
									<a href="#">公司简介</a>
								</li>
							</ul>
						</div>
						<div class="am-u-lg-3" style="color: transparent;">
							right
						</div>
					</div>
				</div>
			</div>
			<div class="logo">
				<img src="" />
			</div>
			<div class="am-g weathe">
				<div class="am-u-lg-8">
					<div class="showtimes" id="showtimes">

					</div>
				</div>
				<div class="am-u-lg-4">
					<iframe allowtransparency="true" frameborder="0" width="120" height="36" scrolling="no" src="//tianqi.eastday.com/plugin/widget_v1.html?sc=3&z=3&t=0&v=0&d=3&bd=0&k=0000ff&f=ffffff&q=0&a=1&c=57816&w=180&h=36&align=center"></iframe>
				</div>
			</div>
		</div>

		<div data-v-4820b226 class="main-out projectList cet-left-panel projectList" style="position:relative;">
			<div class="main-top" style="display:none;">
				<div class="fl main-top-l">
					<div class="main-top-l-top">
						<div class="border-div corner">
							<!--左上边框-->
							<div class="t_line_box">
								<i class="t_l_line"></i>
								<i class="l_t_line"></i>
							</div>
							<!--右上边框-->
							<div class="t_line_box">
								<i class="t_r_line"></i>
								<i class="r_t_line"></i>
							</div>
							<!--左下边框-->
							<div class="t_line_box">
								<i class="l_b_line"></i>
								<i class="b_l_line"></i>
							</div>
							<!--右下边框-->
							<div class="t_line_box">
								<i class="r_b_line"></i>
								<i class="b_r_line"></i>
							</div>

							<div class="content-div" id='homeUserNumberID'>

							</div>
						</div>
						<div class="am-g h-title">
							<h3 class=" am-text-center">主要功能用户占比及分类占比</h3>
						</div>
					</div>
					<div class="main-top-l-bottom">
						<div class="border-div corner">
							<!--左上边框-->
							<div class="t_line_box">
								<i class="t_l_line"></i>
								<i class="l_t_line"></i>
							</div>
							<!--右上边框-->
							<div class="t_line_box">
								<i class="t_r_line"></i>
								<i class="r_t_line"></i>
							</div>
							<!--左下边框-->
							<div class="t_line_box">
								<i class="l_b_line"></i>
								<i class="b_l_line"></i>
							</div>
							<!--右下边框-->
							<div class="t_line_box">
								<i class="r_b_line"></i>
								<i class="b_r_line"></i>
							</div>

							<div class="content-div">

							</div>
						</div>
						<div class="am-g h-title">
							<h3 class=" am-text-center">总项目、总设备数</h3>
						</div>
					</div>
				</div>
				<div class="fl main-top-c">
					<div class="border-div corner">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>

						<div class="content-div">
							<div id='mapid' class='mapID'></div>
						</div>
						<div class="am-g h-title">
							<h3 class=" am-text-center">地图</h3>
						</div>
					</div>

				</div>
				<div class="fl main-top-r">
					<div class="main-top-r-top">
						<div class="border-div corner">
							<!--左上边框-->
							<div class="t_line_box">
								<i class="t_l_line"></i>
								<i class="l_t_line"></i>
							</div>
							<!--右上边框-->
							<div class="t_line_box">
								<i class="t_r_line"></i>
								<i class="r_t_line"></i>
							</div>
							<!--左下边框-->
							<div class="t_line_box">
								<i class="l_b_line"></i>
								<i class="b_l_line"></i>
							</div>
							<!--右下边框-->
							<div class="t_line_box">
								<i class="r_b_line"></i>
								<i class="b_r_line"></i>
							</div>

							<div class="content-div">

							</div>
						</div>
						<div class="am-g h-title">
							<h3 class=" am-text-center">信息发布</h3>
							<button>详情 ></button>
						</div>
					</div>
					<div class="main-top-r-bottom">
						<div class="border-div corner">
							<!--左上边框-->
							<div class="t_line_box">
								<i class="t_l_line"></i>
								<i class="l_t_line"></i>
							</div>
							<!--右上边框-->
							<div class="t_line_box">
								<i class="t_r_line"></i>
								<i class="r_t_line"></i>
							</div>
							<!--左下边框-->
							<div class="t_line_box">
								<i class="l_b_line"></i>
								<i class="b_l_line"></i>
							</div>
							<!--右下边框-->
							<div class="t_line_box">
								<i class="r_b_line"></i>
								<i class="b_r_line"></i>
							</div>

							<div class="content-div">
								<div style="width:100%;height:calc(100% - 40px);margin-top:40px;" id='barID'></div>
							</div>
						</div>

						<div class="am-g h-title">
							<h3 class=" am-text-center">各类事故占比</h3>
						</div>
					</div>
				</div>
				<div class="am-cf">

				</div>
			</div>
			<!--底部-->
			<div class="main-bottom" style="display:none;">
				<!--底部 左边-->
				<div class="fl main-bottom-l">
					<div class="border-div corner">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>

						<div class="content-div">

						</div>
					</div>
					<div class="am-g h-title">
						<h3 class=" am-text-center">各类运维用户派单情况</h3>
					</div>
				</div>
				<!--底部 中间-->
				<div class="fl main-bottom-c ">
					<div class="border-div corner">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>

						<div class="content-div">

						</div>
					</div>
					<div class="am-g h-title">
						<h3 class=" am-text-center">综合能耗占比</h3>
					</div>
				</div>
				<!--底部 右边-->
				<div class="fl main-bottom-r ">
					<div class="border-div corner">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>

						<div class="content-div">
							<div class="list_lh">
								<ul class="alarmInfoMsg_ul gaojingUl" id="secondPageMsg_ul">

								</ul>
							</div>
						</div>
					</div>

					<div class="am-g h-title">
						<h3 class=" am-text-center">告警信息</h3>
						<button onclick="openLayerFunc(id)" id='shishiGJ2'>详情 ></button>
						<!-- 报警 -->
						<div style="position:absolute;bottom:0;left:0;width:0px;height:0px;background:red;">
							<!-- <audio controls autoplay ><source src="warn.wav" type="audio/mpeg"></audio> -->
						</div>
					</div>

				</div>
			</div>
			<!-- 大地图 -->
			<div id="main" class="ditu" style="width: 80%;height:100%;position: absolute;left: 0%;top: -30px;"></div>
			<!-- 公司宣传片 -->
			<div style="position:absolute;bottom:2px;right:0;width:30%;max-width:400px;height:200px;    background: rgba(25, 46, 62, 0.2);border-top-right-radius: 25px;">
				<div class="" style="width:100%;height:100%;">
					<div class="border-div corner" style="display:none;">
						<!--左上边框-->
						<div class="t_line_box">
							<i class="t_l_line"></i>
							<i class="l_t_line"></i>
						</div>
						<!--右上边框-->
						<div class="t_line_box">
							<i class="t_r_line"></i>
							<i class="r_t_line"></i>
						</div>
						<!--左下边框-->
						<div class="t_line_box">
							<i class="l_b_line"></i>
							<i class="b_l_line"></i>
						</div>
						<!--右下边框-->
						<div class="t_line_box">
							<i class="r_b_line"></i>
							<i class="b_r_line"></i>
						</div>

						<div class="content-div">
							<div class="list_lh">
								<ul class="alarmInfoMsg_ul gaojingUl" id="secondPageMsg_ul">

								</ul>
							</div>
						</div>
					</div>

					<div class="am-g h-title">
						<h3 class=" am-text-center" id="titleid">公司宣传片</h3>
						<!-- 报警 -->
						<div id="audio-div" class="audio-div">
							<!-- <video src="dali.mp4" controls="controls">您的浏览器不支持 video 标签。</video> -->
						</div>
					</div>

				</div>
			</div>

			<!-- 告警单位 -->
			<div style="position:absolute;bottom:2px;left:0;width:30%;max-width:400px;height:200px;    background: rgba(25, 46, 62, 0.2);border-top-left-radius: 25px;">
				<div class="" style="width:100%;height:100%;">
					<div class="border-div corner" style="display:block;box-shadow:none;border: none;">

						<div class="content-div">
							<div class="list_lh">
								<ul class="alarmInfoMsg_ul gaojingUl" id="secondPageMsg_ul">
									<li>qwqwwq阿大撒</li>
									<li>qwqwwq阿大撒</li>
									<li>qwqwwq阿大撒</li>
									<li>qwqwwq阿大撒</li>
									<li>qwqwwq阿大撒</li>
									<li>qwqwwq阿大撒</li>
									<li>qwqwwq阿大撒</li>
									<li>qwqwwq阿大撒</li>
									<li>qwqwwq阿大撒</li>
									<li>qwqwwq阿大撒</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="am-g h-title">
						<h3 class=" am-text-center">告警单位</h3>
						<!-- 报警 -->
						<div class="gj-danwei">
							<!-- <audio controls autoplay ><source src="warn.wav" type="audio/mpeg"></audio> -->

						</div>
					</div>

				</div>
			</div>

			<!-- 底脚 -->
			<div id="main" class="yonghu" style="width: 36%;height:83px;position:absolute;bottom:0;    background: rgba(25, 46, 62, 0.2);left: 31%;border-top-right-radius: 15px;border-top-left-radius: 15px;">
				<div data-v-a9740b4e="" data-v-4820b226="" class="customInfo cet-home-bottom customInfoCard">
					<table data-v-a9740b4e="">
						<thead data-v-a9740b4e="">
							<tr data-v-a9740b4e="">
								<td data-v-a9740b4e="">用户数</td>
								<td class="ww" data-v-a9740b4e="">安全运行天数</td>
								<td class="ww" data-v-a9740b4e="">公司覆盖区域</td>
							</tr>
						</thead>
						<tbody data-v-a9740b4e="">
							<tr data-v-a9740b4e="">
								<td data-v-a9740b4e=""><span data-v-a9740b4e="">1233</span>个</td>
								<td class="ww" data-v-a9740b4e=""><span data-v-a9740b4e="" class="safetyDays">105</span>天</td>
								<td class="ww" data-v-a9740b4e=""><span data-v-a9740b4e="">1.60</span>M²</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 公司介绍 -->
			<div id="介绍" class="jieshao" style="width: 30%;max-width:400px;height:calc(100% - 250px);position:absolute;top:0;right: 0;background: rgba(25, 46, 62, 0.2);border-bottom-left-radius: 15px;">
				<h4 style="color: #fff;text-align: center;">公司介绍</h4>
			</div>
			<!-- 市级 -->
			<div id="shiji" class="shiji hide" style="width: 30%;max-width:400px;height:calc(100% - 250px);position:absolute;top:0;right: 0;background: rgba(25, 46, 62, 0.2);border-bottom-left-radius: 15px;">
				<h4 style="color: #fff;text-align: center;">单位列表</h4>
			</div>
		</div>

		<!--layerjs-->
		<script src="layer/layer.js"></script>
		<!--layui JS-->
		<script type="text/javascript" src="layui/layui.js"></script>

		<script src="js/weekTime.js"></script>
		<script src="js/vue.js"></script>
		<script src="amaze/js/amazeui.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/pro_Home.js"></script>
		<script src="js/upScroll.js"></script>
		<script type="text/javascript" src="./echart3jiliandong/static/js/app.js"></script>
		<!--地图-->
		<!-- <script src="js/echarts1.js"></script>
		<script type="text/javascript" src="js/echartMap.js"></script> -->

		<script>
			$(function() {
				$("div.list_lh").myScroll({
					speed: 70, //数值越大，速度越慢
					rowHeight: 50 //li的高度(btn_lh,p高度的2倍)
				});
			});
		</script>
	</body>

</html>